<template>
	<view class="wanlshop-problem-container" :style="{ '--bg': appStyle.home_nav_color }">
		<view class="problem-content">
			<view class="content-ul" v-for="(item, index) in content" :key="item.id">
				<view class="content-li">
					<text class="ask">问</text>
					<text class="ask-content">{{ item.question }}</text>
				</view>
				<view class="content-li">
					<text class="answer">答</text>
					<text class="answer-content">{{ item.answer }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	export default {
		data() {
			return {
				content: {},
				params: {}
			}
		},
		computed: {
			...mapState(['common']),
			// 全局样式
			appStyle() {
				let style = this.common.appStyle;
				uni.setNavigationBarColor({
					backgroundColor: style.home_nav_color
				});
				return style;
			}
		},
		onLoad(option) {
			this.params = option;
			this.getContent(option);
		},
		onPullDownRefresh() {
			this.getContent(this.params);
		},
		methods: {
			async getContent(option) {
				//加载常见问题
				this.$api.get({
					url: '/wanlshop/faq/index',
					data: option,
					success: res => {
						this.content = res;
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		width: 100%;
		height: 100%;
	}
	.wanlshop-problem-container {
		background-color: var(--bg);
		width: 100%;
		//height: 100%;
		height: 100vh;
		padding: 18rpx;
		overflow-y: auto;
	}
	// 常见问题
	.problem-content {
		background-color: #ffffff;
		border-radius: 12rpx;
		padding: 24rpx;
		.content-ul {
			padding-top: 24rpx;
			border-bottom: 1rpx solid #f1f1f1;
			.content-li {
				margin-bottom: 24rpx;
				display: flex;
				align-items: flex-start;
				line-height: 44rpx;
				.ask, .answer {
					margin-right: 16rpx;
					height: 32rpx;
					line-height: 32rpx;
				}
				.ask {
					color: #ff8c1b;
					border: 1rpx solid #ff8c1b;
					background-color: #fff2e2;
					font-size: 24rpx;
					padding: 4rpx 8rpx;
					border-radius: 8rpx;
				}
				.answer {
					color: #7ca878;
					border: 1rpx solid #7ca878;
					background-color: #f0ffe2;
					font-size: 24rpx;
					padding: 4rpx 8rpx;
					border-radius: 8rpx;
				}
				.ask-content {
					color: #363636;
				}
				.answer-content {
					color: #6e6e6e;
				}
			}
		}
		.content-ul:first-child{
			padding-top: 0rpx;
		}
		.content-ul:last-child {
			padding-bottom: 0rpx;
			border-bottom: none;
			.content-li:last-child {
				margin-bottom: 0rpx;
			}
		}
	}
</style>